<template>
  <h2>测试五：watch，关注对象值变化</h2>
  <p>{{ stu.name}} 今年：{{stu.age}} ,工资：{{ stu.job.salary}}</p>
  <button @click="stu.age++">过了一年</button>
  <button @click="stu.name+='!'">改名</button>
  <button @click="stu.job.salary+=300">加钱</button>
</template>

<script>
import {reactive,watch} from "vue";
export default {
  name: "MyWatch2",

  setup(){
    let stu=reactive({
      name:"yang",age:23,job:{
        salary:3000
      }
    })
    // 对于对象的监视
    // watch(stu,(newvalue,oldvalue)=>{
    //   // 当监听多个变量的时候，值也是以数组方式传递。
    //   console.log(`旧值：${oldvalue },新值：${newvalue } `)
    // },//第三个参数是配置值
    //     {immediate:true}//改变前先执行一次
    // )
    // 对于对象的单个属性进行监视，需要指定相应的函数
    // watch(()=>stu.age,(newvalue,oldvalue)=>{
    //   console.log(`旧值：${oldvalue },新值：${newvalue } `)
    // })

    // 多个属性的同时监视，和上面例子相同，需要数组
    // watch([()=>stu.age,()=>stu.name,()=>stu.job.salary],(newvalue,oldvalue)=>{
    //   console.log(`旧值：${oldvalue },新值：${newvalue } `)
    // })
    // 特殊情况：监听对象中的对象
    // 这时修改工资，不会触发监听，需要指定深度监视
      watch( ()=>stu.job ,(newvalue,oldvalue)=>{
        console.log(`旧值：${oldvalue },新值：${newvalue } `)
      },{deep:true})//deep属性，指定对象中的属性对象的属性发生改变
    return{
      stu
    }
  }
}
</script>